<template>
  <div class="padding-lr-xs">
    <a-form-model :model="processData">
      <a-form-model-item label="谁可以发起这个审批">
        <a-radio-group
            v-model="authData.authType"
            @change="changeAuthType(authData.authType)"
        >
          <a-radio-button value="all">
            全员
          </a-radio-button>
          <a-radio-button value="appoint">
            指定成员
          </a-radio-button>
          <a-radio-button value="role">
            指定角色
          </a-radio-button>
          <a-radio-button value="cannotInitiate">
            所有人不可发起
          </a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-item
          v-if="authData.authType === 'appoint'"
      >
        <span class="title">指定成员</span>
        <personnel-popup
            placeholder="指定成员"
            v-model="authData.candidateStarterUsersName"
            :multiple="false"
            @change="(value,data) => {
						addUser({
						  userName: data.map(e => e.userNameId).toString(),
              userNameId: data.map(e => e.userNameId).toString()
						},'appoint')
					}"
        ></personnel-popup>
      </a-form-item>
      <a-form-item
          label="指定角色"
          v-else-if="authData.authType === 'role'"
      >
        <a-input
            key="3"
            v-model="authData.candidateStarterGroupsName"
            placeholder="请选择"
            readOnly
        >
          <a-icon
              slot="addonAfter"
              type="user"
              @click="() => (isRolePopup = true)"
          />
        </a-input>
        <role-popup
            :userList="authData.candidateStarterGroups"
            :visible="isRolePopup"
            style="width: 100%;"
            :typeNum="2"
            @change="(value) => addUser(value, 'role')"
            @close="() => (isRolePopup = false)"
        />
      </a-form-item>
    </a-form-model>
  </div>
</template>

<script>
import rolePopup from "@/components/TopVUI/custom/rolePopup";
import {PersonnelPopup} from "@/components";

export default {
  name: "PermissionSetting",
  components: { rolePopup, PersonnelPopup},
  data() {
    return {
      isRolePopup: false,
    }
  },
  props: {
    processData: {
      type: Object,
      required: true,
    },
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
    authData: {
      type: Object,
      required: true,
    },
  },
  watch: {},
  methods: {
    updateProperties(properties) {
      this.modeler.get("modeling").updateProperties(this.element, properties);
    },
    addUser(properties, type) {
      if (this.element.businessObject?.candidateStarterUsers) delete this.element.businessObject.candidateStarterUsers;
      if (this.element.businessObject?.candidateStarterUsersName) delete this.element.businessObject.candidateStarterUsersName;
      if (this.element.businessObject?.candidateStarterGroups) delete this.element.businessObject.candidateStarterGroups;
      if (this.element.businessObject?.candidateStarterGroupsName) delete this.element.businessObject.candidateStarterGroupsName;
      let params = {};
      if (type === "appoint") {
        params = {
          candidateStarterUsers: properties.userNameId,
          candidateStarterUsersName: properties.userName,
        };
      } else if (type === "role") {
        params = {
          candidateStarterGroups: properties.id,
          candidateStarterGroupsName: properties.roleName,
        };
      }
      this.updateProperties(params);
      this.$emit("setStarterData", type, properties.id ? properties.id : properties.userNameId);
    },
    changeAuthType(val) {
      if (this.element.businessObject?.candidateStarterUsers) delete this.element.businessObject.candidateStarterUsers;
      if (this.element.businessObject?.candidateStarterUsersName) delete this.element.businessObject.candidateStarterUsersName;
      if (this.element.businessObject?.candidateStarterGroups) delete this.element.businessObject.candidateStarterGroups;
      if (this.element.businessObject?.candidateStarterGroupsName) delete this.element.businessObject.candidateStarterGroupsName;
      this.updateProperties({authType: val});
      this.$emit("setStarterData", val, "");
    },
  }
}
</script>
